<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成图片</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<h1>生成图片</h1>
<input type="text" id="inputText" placeholder="输入您的描述">
<button onclick="generateImage()">生成</button>
<div id="result"></div>

<script>
    function generateImage() {
        const str = document.getElementById('inputText').value;
        axios.get('/admin/image', { params: { str } })
            .then(response => {
                // const decodedString = atob( response.data.payload.choices.text[0].content);
                // document.getElementById('result').innerHTML = `<img src="${decodedString.data}" alt="生成的图片" />`;
                const base64String = response.data.payload.choices.text[0].content;
                document.getElementById('result').innerHTML = `<img src="data:image/png;base64,${base64String}" alt="生成的图片" />`;
            })
            .catch(error => {
                console.error('错误:', error);
            });
    }
</script>
</body>

</html>
